<template>
    <div style="width:100%;height: 700px;position: relative;">
		<div >
			
		
        <div class="form-container">
            <div class="image-container">
                <el-upload
                    class="upload-demo"
                    drag
                    :auto-upload="false"
                    list-type="picture"
                    :show-file-list="true"
                    :file-list="fileList"
                    :limit="1"
                    @change="onChangeFile"
                    ref="uploadRef"
                >
                    <div>
                        <h3>原图片</h3>
                        <el-avatar :size="50" :src="`/api/public/finduserimg/`+data.user.pic" />
                    </div>
                    <h3>新上传的图片</h3>
                    <img v-if="imgUrl" :src="imgUrl" class="avatar" style="height: 30vw;" />
                    <div class="el-upload__text">
                        拖入或者 <em>点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            图片不能大于 500kb
                        </div>
                    </template>
                </el-upload>
            </div>
            <el-form :model="data.user" :rules="rules" ref="formRef" label-width="120px">
                <el-form-item label="用户姓名" prop="uname">
                    <el-input v-model="data.user.uname"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号"  prop="phone">
                    <el-input v-model="data.user.phone" type="number" placeholder="0"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="sex">
				<el-radio-group v-model="data.user.sex">
				        <el-radio value="1">男生</el-radio>
				        <el-radio value="0">女生</el-radio>
				 </el-radio-group>
				</el-form-item>
                <el-form-item label="用户地址" prop="addr">
                    <el-input
                        v-model="data.user.addr"
                        style="width: 240px"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入地址精致到门牌号"
                    />
                </el-form-item>
				<el-form-item>
				<el-button type="primary" @click="update()">修改</el-button>
				</el-form-item>
            </el-form>
        </div>
		</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { $get, $postf } from "../../ajax/index.js"
import myalert from "../../utils/myalert.js"
import store from "../../store/index.js"
import router from "../../router/index.js"
import { useRoute, useRouter } from 'vue-router'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const imgUrl=ref('');
const formData = new FormData();
const data = reactive({
    user: { uid: 0, uname: '' },
})

onMounted(()=>{
	console.log(a)
	var a=10;
	
	data.user.uid=store.state.user.uid;
	data.user.uname=store.state.user.uname;
	data.user.phone=store.state.user.phone;
	data.user.sex=store.state.user.sex;
	data.user.addr=store.state.user.addr;
	data.user.pic=store.state.user.pic;
	console.log(data.user);
})

//图片上传
	function onChangeFile(file, fileList){
		console.log("file=" + file.value)
		console.log("fileList=" + fileList)
		if (fileList.length > 0) {
			//fileList[0].raw; 文件内容
			imgUrl.value = URL.createObjectURL(fileList[0].raw)
			formData.append('mfile',imgUrl.value)
		}
	}

function update(){
	console.log(data.user);
	console.log(imgUrl.value);
	formData.append("uid", data.user.uid)
	formData.append("uname",data.user.uname)
	formData.append("phone", data.user.phone)
	formData.append("sex", data.user.sex)
	formData.append("addr",data.user.addr)
	formData.append("pic",data.user.pic)
	$postf("/api/seller/update",formData)
	.then((resp)=>{
		router.push("/homejd");
		ElMessage({
			message: "修改成功!!!",
			type: 'success',
		})
	})
}
</script>

<style scoped>
.form-container {
    position: absolute;
    top: 20%;
    right: 25%;
}

.image-container {
    width: 25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
	
}
</style>    